@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .chat-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }
  .inbox-height {
    @apply h-[calc(100vh_-_8.125rem)] lg:h-[calc(100vh_-_5.625rem)];
  }

  /* Text gradient utilities */
  .text-gradient-primary {
    background: linear-gradient(
      to right,
      hsl(var(--secondary-muted)),
      hsl(var(--secondary))
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-primary-diagonal {
    background: linear-gradient(
      135deg,
      hsl(var(--secondary-muted)),
      hsl(var(--secondary))
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Border gradient utilities */
  .border-gradient-primary {
    background: linear-gradient(
      to right,
      hsl(var(--secondary-muted)),
      hsl(var(--secondary))
    );
    padding: 1px;
  }

  .border-gradient-primary > * {
    background: hsl(var(--background));
  }
}

/* third-party libraries CSS */

.tableCheckbox:checked ~ div span {
  @apply opacity-100;
}
.tableCheckbox:checked ~ div {
  @apply bg-primary border-primary;
}

.apexcharts-legend-text {
  @apply !text-muted-foreground;
}
.apexcharts-text {
  @apply !fill-muted-foreground;
}
.apexcharts-xcrosshairs {
  @apply !fill-border;
}
.apexcharts-gridline {
  @apply !stroke-border;
}
.apexcharts-series.apexcharts-pie-series path {
  @apply dark:!stroke-transparent;
}
.apexcharts-legend-series {
  @apply !inline-flex gap-1.5;
}
.apexcharts-tooltip.apexcharts-theme-light {
  @apply dark:!bg-card dark:!border-border;
}
.apexcharts-tooltip.apexcharts-theme-light .apexcharts-tooltip-title {
  @apply dark:!bg-muted dark:!border-border;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
  @apply dark:!bg-muted dark:!border-muted dark:!text-muted-foreground;
}
.apexcharts-xaxistooltip-bottom:after {
  @apply dark:!border-b-muted;
}
.apexcharts-xaxistooltip-bottom:before {
  @apply dark:!border-b-muted;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --card-accent: 0 0% 100%;
    --card-accent-foreground: 0 0% 3.9%;
    --card-subtle: 31 57% 96%;
    --card-subtle-foreground: 0 0% 9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 210 100% 13%;
    --primary-foreground: 0 0% 98%;
    --secondary: 32 100% 37%;
    --secondary-foreground: 0 0% 9%;
    --secondary-muted: 32 75% 78%;
    --secondary-muted-foreground: 0 0% 3.9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 33 74% 62%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --success: 141 71% 48%;
    --success-foreground: 0 0% 98%;
    --warning: 36 100% 50%;
    --warning-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 210 50% 5%;
    --foreground: 0 0% 98%;
    --card: 210 50% 5%;
    --card-foreground: 0 0% 98%;
    --card-accent: 31 57% 93%;
    --card-accent-foreground: 0 0% 3.9%;
    --card-subtle: 233 24% 15%;
    --card-subtle-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 31 57% 93%;
    --primary-foreground: 0 0% 9%;
    --secondary: 209 91% 61%;
    --secondary-foreground: 0 0% 98%;
    --secondary-muted: 210 67% 94%;
    --secondary-muted-foreground: 0 0% 3.9%;
    --muted: 210 100% 13%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 31 57% 93%;
    --accent-foreground: 210 100% 13%;
    --destructive: 0 62.8% 63%;
    --destructive-foreground: 0 0% 98%;
    --success: 141 71% 48%;
    --success-foreground: 0 0% 98%;
    --warning: 36 100% 50%;
    --warning-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}
